<!DOCTYPE html>
<html>
<head>
	<title>盾泰云平台</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<meta name="renderer" content="webkit">
	<meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->

    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min14ed.css" rel="stylesheet">
    <link href="css/font-awesome.min93e3.css" rel="stylesheet">
    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/style.min862f.css" rel="stylesheet">
    <script>
        // 判断IE
        if(navigator.appName == "Microsoft Internet Explorer"&&parseInt(navigator.appVersion.split(";")[1].replace(/[ ]/g, "").replace("MSIE",""))<11){
            window.location.replace("/module/updatebrowser.html")
        }
    </script>
    <style type="text/css">
        [v-cloak] {
            display: none;
        }
        .J_menuItemTarget{
            padding: 7px 15px 7px 10px;
            padding-left: 52px;
            color: #a7b1c2;
            font-weight: 600;
            display: block;
            cursor: pointer;
        }
        .J_menuItemTarget:hover{
            background-color: #293846;
            color: #fff;
        }
    </style>
</head>
<body class="fixed-sidebar full-height-layout gray-bg pace-done" style="overflow:hidden">
	<div id="wrapper" v-cloak>
		<!-- 左侧导航栏 开始 -->
		<nav class="navbar-default navbar-static-side" role="navigation">
            <a class="navbar-minimalize" href="#" style="display: none"><i class="fa fa-bars"></i></a>
            <div class="nav-close"><i class="fa fa-times-circle"></i></div>
            <div class="sidebar-collapse">
                <ul class="nav" id="side-menu">
                    <li class="nav-header">
                        <div class="dropdown profile-element">
                            <span><img alt="image" class="img-circle" src="img/login/header.png" /></span>
                            <a data-toggle="dropdown" class="dropdown-toggle" href="javascript:;">
                                <span class="clear" id="userInfo">
                                    <span class="block m-t-xs"><strong class="font-bold" id="userName">{{value.userInfo.nickName}}</strong></span>
                                    <span class="text-muted text-xs block" id="userRole">{{value.userInfo.role}}</span>
                                    <!-- <span class="text-muted text-xs block">超级管理员<b class="caret"></b></span> -->
                                </span>
                            </a>
                            <!-- <ul class="dropdown-menu animated fadeInRight m-t-xs">
                                <li><a class="J_menuItem" href="">修改头像</a>
                                </li>
                                <li><a class="J_menuItem" href="">个人资料</a>
                                </li>
                                <li><a class="J_menuItem" href="">联系我们</a>
                                </li>
                                <li class="divider"></li>
                                <li><a href="./CF/other-login.html">安全退出</a>
                                </li>
                            </ul> -->
                        </div>
                        <div class="logo-element">DTYun</div>
                    </li>
                    <li v-if="FENCE_ALARM.length">
                        <a class="J_menuItem" :href="FENCE_ALARM[0].categoryUrl">
                            <i class="fa fa-bell"></i>
                            <span class="nav-label">{{translation.FENCE_ALARM}}</span>
                            <span class="label label-warning pull-right">16</span>
                        </a>
                    </li>
                    <li name="系统管理" v-if="SYSTEM_MANAGE.length">
                        <a href="javascript:;">
                            <i class="fa fa-cogs"></i>
                            <span class="nav-label">{{translation.SYSTEM_MANAGE}}</span>
                            <span class="fa arrow"></span>
                        </a>
                        <ul class="nav nav-second-level">
                            <li v-for="item in SYSTEM_MANAGE">
                                <a class="J_menuItem" :href="item.categoryUrl" >{{item.categoryName}}</a>
                            </li>
                        </ul>
                    </li>
                    <li name="终端管理" v-if="TERMINAL_MANAGE.length">
                        <a href="javascript:;">
                            <i class="fa fa-television"></i>
                            <span class="nav-label">{{translation.TERMINAL_MANAGE}}</span>
                            <span class="fa arrow"></span>
                        </a>
                        <ul class="nav nav-second-level">
                            <li v-for="item in TERMINAL_MANAGE">
                                <a class="J_menuItem" :href="item.categoryUrl" >{{item.categoryName}}</a>
                            </li>
                        </ul>
                    </li>
                    <li name="车辆设备管理" v-if="VEHICLE_MANAGE.length">
                        <a href="javascript:;">
                            <i class="fa fa-car"></i>
                            <span class="nav-label">{{translation.VEHICLE_MANAGE}}</span>
                            <span class="fa arrow"></span>
                        </a>
                        <ul class="nav nav-second-level">
                            <li v-for="item in VEHICLE_MANAGE">
                                <a class="J_menuItem" :href="item.categoryUrl" >{{item.categoryName}}</a>
                            </li>
                        </ul>
                    </li>
                    <li name="统计图表" v-if="STATISTICAL_CHARTS.length">
                        <a href="javascript:;">
                            <i class="fa fa-bar-chart-o"></i>
                            <span class="nav-label">{{translation.STATISTICAL_CHARTS}}</span>
                            <span class="fa arrow"></span>
                        </a>
                        <ul class="nav nav-second-level">
                            <li v-for="item in STATISTICAL_CHARTS">
                                <a class="J_menuItem" :href="item.categoryUrl" >{{item.categoryName}}</a>
                            </li>
                        </ul>
                    </li>
                    <li name="位置管理" v-if="LOCATION_MANAGEMENT.length">
                        <a href="javascript:;">
                            <i class="fa fa-map-o"></i>
                            <span class="nav-label">{{translation.LOCATION_MANAGEMENT}}</span>
                            <span class="fa arrow"></span>
                        </a>
                        <ul class="nav nav-second-level">
                            <li v-for="item in LOCATION_MANAGEMENT">
                                <a class="J_menuItem" :href="item.categoryUrl" >{{item.categoryName}}</a>
                            </li>
                        </ul>
                    </li>
                    <li name="大屏展示" v-if="SCREEN_DISPLAY.length">
                        <a href="javascript:;">
                            <i class="fa fa-expand"></i>
                            <span class="nav-label">{{translation.SCREEN_DISPLAY}}</span>
                            <span class="fa arrow"></span>
                        </a>
                        <ul class="nav nav-second-level">
                            <li v-for="item in SCREEN_DISPLAY">
                                <a class="J_menuItem" :href="item.categoryUrl" >{{item.categoryName}}</a>
                            </li>
                        </ul>
                    </li>
                    <li name="分屏管理" v-if="SPLIT_SCREEN.length">
                        <a href="javascript:;">
                            <i class="fa fa-clone"></i>
                            <span class="nav-label">{{translation.SPLIT_SCREEN}}</span>
                            <span class="fa arrow"></span>
                        </a>
                        <ul class="nav nav-second-level">
                            <li v-for="item in SPLIT_SCREEN">
                                <span class="J_menuItemTarget" :data-src="item.categoryUrl">{{item.categoryName}}</span>
                            </li>
                        </ul>
                    </li>
                    <li name="反向控制" v-if="RESOLVE_CONTROL.length">
                        <a href="javascript:;">
                            <i class="fa fa-mail-reply"></i>
                            <span class="nav-label">{{translation.RESOLVE_CONTROL}}</span>
                            <span class="fa arrow"></span>
                        </a>
                        <ul class="nav nav-second-level">
                            <li v-for="item in RESOLVE_CONTROL">
                                <a class="J_menuItem" :href="item.categoryUrl" >{{item.categoryName}}</a>
                            </li>
                        </ul>
                    </li>
                    <li name="T-BOX 版本管理" v-if="TBOX_VERSION.length">
                        <a href="javascript:;">
                            <i class="fa fa-vimeo"></i>
                            <span class="nav-label">{{translation.TBOX_VERSION}}</span>
                            <span class="fa arrow"></span>
                        </a>
                        <ul class="nav nav-second-level">
                            <li v-for="item in TBOX_VERSION">
                                <a class="J_menuItem" :href="item.categoryUrl" >{{item.categoryName}}</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
        <!-- 左侧导航栏 结束 -->
        <!--右侧部分 开始-->
        <div id="page-wrapper" class="gray-bg dashbard-1">
            <div class="row content-tabs">
                <button class="roll-nav roll-left J_tabLeft"><i class="fa fa-backward"></i>
                </button>
                <nav class="page-tabs J_menuTabs">
                    <div class="page-tabs-content">
                        <!-- <a href="javascript:;" class="active J_menuTab" data-id="car-ShowData.html">数据展示</a> -->
                        <a href="javascript:;" class="active J_menuTab" data-id="car-ShowData.html">数据展示</a>
                    </div>
                </nav>
                <button class="roll-nav roll-right J_tabRight"><i class="fa fa-forward"></i>
                </button>
                <div class="btn-group roll-nav roll-right">
                    <button class="dropdown J_tabClose" data-toggle="dropdown">关闭操作<span class="caret"></span>
                    </button>
                    <ul role="menu" class="dropdown-menu dropdown-menu-right">
                        <li class="J_tabShowActive"><a>定位当前选项卡</a>
                        </li>
                        <li class="divider"></li>
                        <li class="J_tabCloseAll"><a>关闭全部选项卡</a>
                        </li>
                        <li class="J_tabCloseOther"><a>关闭其他选项卡</a>
                        </li>
                    </ul>
                </div>
                <span class="roll-nav roll-right J_tabReload" id="reload"><i class="fa fa-refresh"></i> 刷新</span>
                <span class="roll-nav roll-right J_tabExit" data-toggle="modal" data-target=".bs-example-modal-sm"><i class="fa fa-sign-out"></i> 退出</span>
            </div>
            <div class="row J_mainContent" id="content-main">
                <!-- <iframe class="J_iframe" name="iframe0" width="100%" height="100%" src="./module/car-ShowData.html" frameborder="0" data-id="car-ShowData.html" seamless allowfullscreen></iframe> -->
                <iframe class="J_iframe" name="iframe0" width="100%" height="100%" src="./module/car-ShowData.html" frameborder="0" data-id="car-ShowData.html" seamless allowfullscreen></iframe>
            </div>
            <!-- <div class="footer">
                <div class="pull-right">&copy; 2017-2018 <a href="javascript:;" target="_blank">Design By DT</a></div>
            </div> -->
        </div>
        <!-- Small modal -->
        <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
          <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">是否退出</h4>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="logout">确定</button>
              </div>
            </div>
          </div>
        </div>
	</div>
	<script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
    <script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
    <script src="js/hplus.min.js"></script>
    <script src="js/contabs.min.js" type="text/javascript"></script>
    <script src="../plugins/ElementUI/vue-2.5.16.js"></script>
    <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
    <script src="js/ApiRequest.js"></script>
    <script type="text/javascript">
        // 获取用户信息
        var value = storageLocal.get("userInfo");
        if(!value){
            window.location.href = "./module/user-login.html";
        }
        new Vue({
            el: '#wrapper',
            data:{
                value:value? value :'',
                translation:{
                    SYSTEM_MANAGE:'系统管理',
                    TERMINAL_MANAGE:'终端管理',
                    VEHICLE_MANAGE:'车辆设备管理',
                    STATISTICAL_CHARTS:'统计图表',
                    LOCATION_MANAGEMENT:'EV监控',
                    SCREEN_DISPLAY:'大屏展示',                      
                    SPLIT_SCREEN:'分屏管理',
                    RESOLVE_CONTROL:'反向控制',
                    TBOX_VERSION:'T-BOX 版本管理',
                    FENCE_ALARM:'围栏报警',
                }
            },
            mounted:function (){
                this.$nextTick(function() {
                    // this.webSocket()
                })
            },
            computed:{
                SYSTEM_MANAGE:function(){
                    return this.value.categoryMap.filter(function(item){
                        return item.from == "SYSTEM_MANAGE"
                    })
                },
                TERMINAL_MANAGE:function(){
                    return this.value.categoryMap.filter(function(item){
                        return item.from == "TERMINAL_MANAGE"
                    })
                },
                VEHICLE_MANAGE:function(){
                    return this.value.categoryMap.filter(function(item){
                        return item.from == "VEHICLE_MANAGE"
                    })
                },
                STATISTICAL_CHARTS:function(){
                    return this.value.categoryMap.filter(function(item){
                        return item.from == "STATISTICAL_CHARTS"
                    })
                },
                LOCATION_MANAGEMENT:function(){
                    return this.value.categoryMap.filter(function(item){
                        return item.from == "LOCATION_MANAGEMENT"
                    })
                },
                SCREEN_DISPLAY:function(){
                    return this.value.categoryMap.filter(function(item){
                        return item.from == "SCREEN_DISPLAY"
                    })
                },
                SPLIT_SCREEN:function(){
                    return this.value.categoryMap.filter(function(item){
                        return item.from == "SPLIT_SCREEN"
                    })
                },
                RESOLVE_CONTROL:function(){//: '反向控制',
                    return this.value.categoryMap.filter(function (item) {
                        return item.from == "RESOLVE_CONTROL"
                    })
                },
                TBOX_VERSION: function () {//: 'T-BOX 版本管理',
                    return this.value.categoryMap.filter(function (item) {
                        return item.from == "TBOX_VERSION"
                    })
                },
                FENCE_ALARM: function () {//: '围栏报警',
                    return this.value.categoryMap.filter(function (item) {
                        return item.from == "FENCE_ALARM"
                    })
                }
            },
            methods:{
                webSocket: function () {
                    if ("WebSocket" in window) {
                        var options = {
                            connectTimeout: 4000, // 超时时间
                            // 认证信息
                            clientId: '123654long123',
                            username: 'admin',
                            password: '111111',
                        }
                        var client = mqtt.connect(apiUrl.wsZ+'/mqtt', options)
                        client.on('reconnect', function(error){
                            console.log('正在重连:', error)
                        })
                        client.on('connect',function (e) {
                            console.log('成功连接服务器')
                            // 订阅一个主题
                            client.subscribe('/device/07B8101790228770', { qos: 1 }, function (error) {
                                if (!error) {
                                    console.log('订阅成功')
                                }
                            })
                        })
                        // 监听接收消息事件
                        client.on('message', (topic, message) => {
                            console.log('收到来自', topic, '的消息',JSON.parse(message.toString()))
                        })
                        client.on('error', function(error){
                            console.log('连接失败:', error)
                        })
                    }
                }
            }
        })
        $(function(){
            
            $(".J_menuItemTarget").click(function(){
                var src = $(this).attr("data-src");
                window.open(src, "_blank","scrollbars=yes,resizable=1,modal=false,alwaysRaised=yes");
            })
            // 退出登录
            $("#logout").click(function(){
               $.ajax({
                 type: "POST",
                 url: apiUrl.wangtao+"/user/logout",
                 data: {},
                 dataType: "json",
                 xhrFields: {
                    withCredentials: true
                 },
                 beforeSend:function(){
                    $("#logout").text('loading...')
                 },
                 success: function(data){
                    window.localStorage.removeItem("userInfo")
                    setTimeout(function(){
                        window.location.href = "./module/user-login.html"
                    },500)
                 },
                 complete:function(){
                    $(".bs-example-modal-sm").modal('hide')
                 }
                });
            })
            // 刷新当前框架
            $("#reload").click(function(){
                var dom = $('.J_iframe');
                dom.map(function(index,item){
                    var display = $(item).css('display');
                    if(display == "inline"){
                        $(item).attr('src',$(item).attr('src'))
                    }
                })
            })
            // 切换侧边栏显示
            $(".navbar-static-side").hover(function(){
                $("body").removeClass("mini-navbar");
                SmoothlyMenu();
            },function(){
                $("body").toggleClass("mini-navbar");
                SmoothlyMenu();
            });
        })
        
    </script>
</body>
</html>